/* return.css */
/* 全局基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 盒模型计算方式 */
}

/* 页面容器 */
.page-container {
  position: relative;
  bottom: 120%; /* 特殊定位处理 */
}

/* 返回顶部按钮样式 */
.return-top-btn {
  position: fixed; /* 固定定位 */
  right: 30px;     /* 距离右侧30px */
  bottom: 150px;   /* 距离底部150px */
  width: 50px;     /* 固定宽度 */
  height: 50px;    /* 固定高度 */
  border-radius: 50%; /* 圆形按钮 */
  background: #fff; /* 白色背景 */
  border: 1px solid #eee; /* 浅灰色边框 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 24px; /* 箭头大小 */
  cursor: pointer; /* 手形指针 */
  opacity: 0;      /* 默认透明 */
  visibility: hidden; /* 默认隐藏 */
  transition: all 0.3s ease; /* 过渡动画 */
  z-index: 100;    /* 层级 */
}

/* 显示状态下的返回顶部按钮 */
.return-top-btn.show {
  opacity: 1;      /* 完全不透明 */
  visibility: visible; /* 可见 */
}

/* 帮助按钮容器 */
.help-btn-container {
  position: fixed; /* 固定定位 */
  right: 30px;     /* 距离右侧30px */
  bottom: 82px;    /* 距离底部82px */
  z-index: 101;    /* 在返回按钮上层 */
}

/* 帮助按钮样式 */
.help-btn {
  width: 50px;     /* 固定宽度 */
  height: 50px;    /* 固定高度 */
  border-radius: 50%; /* 圆形按钮 */
  background: #1677ff; /* 品牌蓝色 */
  color: white;    /* 白色文字 */
  border: none;    /* 无边框 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  font-size: 24px; /* 问号大小 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  cursor: pointer; /* 手形指针 */
  transition: transform 0.2s; /* 缩放动画 */
  margin-top: 30px; /* 上边距 */
}

/* 帮助按钮悬停效果 */
.help-btn:hover {
  transform: scale(1.05); /* 轻微放大 */
}

/* 帮助弹窗样式 */
.help-popup {
  position: absolute; /* 绝对定位 */
  right: 0;          /* 对齐右侧 */
  bottom: 60px;      /* 距离底部60px */
  width: 180px;      /* 固定宽度 */
  background: white; /* 白色背景 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 阴影效果 */
  padding: 8px 0;    /* 内边距 */
  transform-origin: bottom center; /* 缩放原点 */
  overflow: hidden;   /* 隐藏溢出内容 */
  transition: all 0.1s ease-out; /* 过渡动画 */
  z-index: 102;      /* 最高层级 */
}

/* 弹窗动画状态 */
.help-popup.animating {
  transform: scaleY(0); /* Y轴缩放为0 */
  opacity: 0;           /* 完全透明 */
}

/* 菜单项样式 */
.menu-item {
  display: flex;
  align-items: center; /* 垂直居中 */
  padding: 10px 16px;  /* 内边距 */
  cursor: pointer;     /* 手形指针 */
  transition: background 0.2s; /* 背景色过渡 */
}

/* 菜单项悬停效果 */
.menu-item:hover {
  background: #f5f5f5; /* 浅灰色背景 */
}

/* 菜单图标样式 */
.menu-icon {
  margin-right: 12px;  /* 右侧间距 */
  font-size: 18px;     /* 图标大小 */
  color: #1677ff;      /* 品牌蓝色 */
}

/* 菜单文字样式 */
.menu-text {
  font-size: 14px;     /* 文字大小 */
  color: #333;         /* 深灰色文字 */
}

/* 新手引导弹窗样式 */
.guide-popup {
  position: absolute; /* 绝对定位 */
  right: 0;          /* 对齐右侧 */
  bottom: 60px;      /* 距离底部60px */
  width: 320px;      /* 固定宽度 */
  background: white; /* 白色背景 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 阴影效果 */
  padding: 16px;     /* 内边距 */
  z-index: 102;      /* 最高层级 */
  animation: popIn 0.2s ease-out; /* 入场动画 */
}

/* 引导标题样式 */
.guide-title {
  font-size: 16px;     /* 标题大小 */
  font-weight: bold;   /* 加粗 */
  color: #000;         /* 黑色文字 */
  text-align: center;  /* 居中 */
  margin-bottom: 16px; /* 下边距 */
  padding-bottom: 8px; /* 底部内边距 */
  border-bottom: 1px solid #eee; /* 底部边框 */
}

/* 引导项网格布局 */
.guide-grid {
  display: grid;              /* 网格布局 */
  grid-template-columns: repeat(2, 1fr); /* 2列等宽 */
  gap: 12px;                  /* 网格间距 */
}

/* 单个引导项样式 */
.guide-item {
  padding: 12px;             /* 内边距 */
  background: #f9f9f9;       /* 浅灰色背景 */
  border-radius: 6px;        /* 圆角 */
  cursor: pointer;           /* 手形指针 */
  transition: all 0.2s ease; /* 过渡动画 */
  border: 1px solid #eee;    /* 边框 */
  text-align: center;        /* 文字居中 */
}

/* 引导项悬停效果 */
.guide-item:hover {
  background: #f0f0f0;       /* 背景色加深 */
  transform: translateY(-2px); /* 上移2px */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 引导图标样式 */
.guide-icon {
  font-size: 20px;           /* 图标大小 */
  margin-bottom: 8px;        /* 下边距 */
}

/* 引导项标题样式 */
.guide-item h3 {
  font-size: 14px;           /* 文字大小 */
  font-weight: 600;          /* 中等加粗 */
  margin: 0 0 4px;           /* 外边距 */
  color: #333;               /* 深灰色文字 */
}

/* 引导项描述文字样式 */
.guide-item p {
  font-size: 12px;           /* 较小文字 */
  color: #666;               /* 灰色文字 */
  margin: 0;                 /* 无外边距 */
  line-height: 1.4;          /* 行高 */
}

/* 弹窗入场动画 */
@keyframes popIn {
  from {
    opacity: 0;              /* 初始透明 */
    transform: translateY(10px) scale(0.95); /* 初始位置下移并缩小 */
  }
  to {
    opacity: 1;              /* 完全不透明 */
    transform: translateY(0) scale(1); /* 正常位置和大小 */
  }
}

/* 响应式设计 - 小屏幕设备 */
@media (max-width: 400px) {
  .guide-popup {
    width: 280px;            /* 缩小宽度 */
  }
  
  .guide-grid {
    grid-template-columns: 1fr; /* 单列布局 */
  }
}